<template>
  <div class="newmusic animate__animated animate__backInRight">
    <ul>
      <li
        v-for="(item, index) in List.slice(0, a)"
        :key="item.id"
        @click="player(item.id)"
        class="animate__animated animate__bounceInUp"
      >
        <router-link to="/" :class="ishow ? '' : 'titlebottom'">
          <!-- 第二页数字 S-->
          <p v-show="isshot" :class="index < 3 ? 'pcolor' : 'p'">
            {{ index | formatNumber }}
          </p>
          <!-- 第二页数字 E-->

          <!-- 播放页图片 S-->
          <div class="IMGbox" v-if="!ishow">
            <img :src="item.album.picUrl" />
          </div>
          <!-- 播放页图片E-->

          <div class="textBox">
            <p class="title" :class="ishow ? 'title' : 'titleplay'">
              {{ item.name }}
            </p>

            <p class="disc" v-if="ishow">
              {{ item | formatArtists(path) }} - {{ item | formatName(path) }}
            </p>

            <!-- 播放页的歌唱者和歌名S -->
            <p class="playsingger" v-else>
              {{ item | formatArtists(path) }} - {{ item.album.name }}
            </p>
            <!-- 播放页的歌唱者和歌名E -->
          </div>
          <i class="iconfont icon-iconset0481"></i>
        </router-link>
      </li>
    </ul>

    <div class="boxbottom"  v-show="isload">
      <van-button
        round
        type="info"
        @click="loadMore"
        color="#d43c33"
        >加载更多</van-button
      >
    </div>
    <!--  -->
  </div>
</template>
<script>
import { newsong } from "@/api/recommend";
import { hotsong, hotdetail } from "@/api/hot";
import { playsong, simiSong } from "@/api/play";
export default {
  data() {
    return {
      List: [],
      path: "",
      idList: [],
      song: "",
      picUrl: "",
      singer: [],
      ishow: true,
      isload: false,
      isshot:false,
      likeId: this.$store.state.MusicID,
      a: 20,
    };
  },
  methods: {
    // 加载更多
    loadMore() {
      this.a += 20;
      if (this.a == 200) {
        this.isload = !this.isload;
        console.log(this.a);
      }
    },

    // 播放页
    player(ID) {
      // 调用vuex里面的ID
      this.$store.commit("changeMusicID", ID);

      playsong(ID).then((res) => {
        this.song = res.data.data[0].url;
        // 扔去vuex
        this.$store.dispatch("songlink", this.song);
        hotdetail(ID).then((res) => {
          this.singer = res.data.songs[0];
          // singer数组扔去vuex
          this.$store.dispatch("singeListdata", this.singer);

          this.picUrl = res.data.songs[0].al.picUrl;
          // 扔去picUrlvuex
          this.$store.dispatch("picUrl", this.picUrl);

          // 传ID并且跳转
          this.$router.push({
            path: "/play",
            query: {
              ID: this.$store.state.MusicID,
            },
          });
        });
      });
    },
  },
  created: function () {
    if (this.$route.path == "/") {
      newsong().then((res) => {
        this.List = res.data.result;
        this.path = "/";
      });
    } else if (this.$route.path == "/Hot") {
      this.isload = true;
        this.isshot=true;
      hotsong().then((res) => {
        this.List = res.data.playlist.trackIds;
        this.List.forEach((item) => {
          this.idList.push(item.id);
        });
        hotdetail(this.idList.join(",")).then((res) => {
          this.List = res.data.songs;
          this.path = "/Hot";
        });
      });
    } else if (this.$route.path == "/search") {
      this.path = "/search";
      this.List = this.$store.state.searchRecommendList;
    } else if (this.$route.path == "/play") {
      this.$store.commit("changeMusicID", this.$route.query.ID);
      this.ishow = false;
      simiSong(this.likeId).then((res) => {
        this.List = res.data.songs;
        this.path = "/play";
      });
    }
  },
  watch: {
    "$store.state.searchRecommendList": function () {
      this.List = this.$store.state.searchRecommendList;
    },
    "$store.state.IDlist": function () {
         this.isshot=true;
      if (this.$route.path == "/playlist") {
        hotdetail(this.$store.state.IDlist.join(",")).then((res) => {
          this.List = res.data.songs.slice(0, 9);
          this.path = "/playlist";
        });
      }
    },
  },
  filters: {
    formatNumber(num) {
      return String(num + 1).padStart(2, 0);
    },
    formatArtists(artists, path) {
      let name = "";

      // 组件应用于推荐页时
      if (path == "/") {
        artists.song.artists.forEach((item) => {
          name += item.name + " / ";
        });
        return name.slice(0, -2);
        // 组件应用于热门页时
      } else if (path == "/Hot" || path == "/playlist") {
        artists.ar.forEach((item) => {
          name += item.name + " / ";
        });
        return name.slice(0, -2);
        // 组件应用于搜索页时
      } else if (path == "/search" || path == "/play") {
        if (
          !artists.artists ||
          Object.prototype.toString.call(artists.artists) != "[object Array]"
        ) {
          return;
        }
        artists.artists.forEach((item) => {
          name = item.name + " / ";
        });
        return name.slice(0, -2);
      }
    },
    formatName(item, path) {
      if (path == "/") {
        return item.name;
      } else if (path == "/Hot" || path == "/playlist") {
        return item.al.name;
      } else if (path == "/search" || path == "/play") {
        return item.name;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.newmusic {
  ul {
    li {
      a {
        margin: 0 vw(20);
        padding: vw(20) 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: solid 1px #eee;
        .IMGbox {
          width: 40px;
          height: 40px;
          background-color: #fff;
          margin-right: vw(20);
          img {
            width: 100%;
          }
        }
        p {
          color: hsla(0, 0%, 100%, 0.6);
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          font-size: vw(26);
        }
        .pcolor {
          color: $mainColor;
          font-size: vw(40);
        }
        .p {
          color: #999;
          font-size: vw(35);
        }
        .textBox {
          flex-grow: 1;
          .title {
            font-size: vw(32);
            color: #000;
          }
          .titleplay {
            font-size: vw(32);
            color: #fff;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
          }
          .disc {
            font-size: vw(20);
            color: #888;
            padding-left: vw(28);
            position: relative;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 1;
            &:before {
              content: "SQ";
              display: block;
              border: 1px solid red;
              color: red;
              position: absolute;
              font-size: vw(20);
              padding: 0 vw(10);
              left: vw(-14);
              top: 51%;
              transform: translateY(-50%) scale(0.4);
            }
          }
        }
        i {
          // color:hsla(0, 0%, 100%, 0.5);
          color: rgb(167, 166, 166);
          font-size: vw(50);
        }
      }
      .titlebottom {
        border-bottom: solid 1px #7d7d7d;
      }
    }
  }
  .boxbottom {
    padding: vw(20) 0;
    text-align: center;
  }
}
</style>
